import React, { Fragment, useState } from "react";
import { Button, Table, Space, Popconfirm } from "antd";
import { PicRightOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";

import TimeShow from "./../../../components/TimeShow";
import { getBanner, deleteBanner } from "./../../../api/banner";

function BannerManagement(props) {
    const history = useHistory();
    const [bannerlist, setBannerlist] = useState([]);
    useState(() => {
        getBanner().then((res) => {
            setBannerlist(res.data.data);
        });
    }, []);
    console.log(bannerlist);

    const cancel = () => { };
    const goDetail = (text) => {
        console.log(text);
        history.push("/content/EditBanner?bannerid=" + text);
    };
    const goDelete = (bannerid, index) => () => {
        console.log(bannerid);
        deleteBanner({ bannerid: bannerid }).then((res) => {
            // 解决删除后需手动刷新才可以更新视图的问题
            let arr = JSON.parse(JSON.stringify(bannerlist));
            arr.splice(index, 1);
            setBannerlist(arr);
            //   setTotal(total - 1)
            console.log(res.data);
        });
    };
    const columns = [
        {
            title: "序号",
            align: "center",
            render: (text, record, index) => (
                <span>{(current - 1) * pageSize + index + 1}</span>
            ),
        },
        {
            title: "轮播图标题",
            align: "center",
            dataIndex: "bannertitle",
            key: "bannertitle",
        },
        {
            title: "缩略图",
            align: "center",
            dataIndex: "bannerimg",
            key: "bannerimg",
            render: (text, record, index) => (
                <img src={text} alt="" style={{ height: "80px" }} />
            ),
        },
        {
            title: "状态",
            align: "center",
            dataIndex: "isshow",
            key: "isshow",
            render: (text, record, index) => (text === true ? "上架" : "下架"),
        },
        {
            title: "上传时间",
            align: "center",
            dataIndex: "regtime",
            key: "regtime",
            render: (text, record, index) => {
                return <TimeShow time={text} />;
            },
        },
        {
            title: "操作",
            align: "center",
            dataIndex: "bannerid",
            render: (text, record, index) => {
                return (
                    <Space>
                        <span
                            style={{ color: "#f00", cursor: "pointer" }}
                            onClick={() => goDetail(text)}
                        >
                            编辑
            </span>

                        <Popconfirm
                            title="确定删除?"
                            onConfirm={goDelete(
                                record.bannerid,
                                (current - 1) * pageSize + index
                            )}
                            onCancel={cancel}
                            okText="确定"
                            cancelText="取消"
                        >
                            <span style={{ color: "#f00", cursor: "pointer" }}>删除</span>
                        </Popconfirm>
                    </Space>
                );
            },
        },
    ];

    //分页设置
    const [pageSize, setPageSize] = useState(5);
    const [current, setCurrent] = useState(1);

    return (
        <Fragment>
            <span className="indexTitle">
                <PicRightOutlined />
        轮播图列表
        <Button
                    type="primary"
                    className="AddBanner"
                    onClick={() => props.history.push("/content/addBanner")}
                >
                    添加轮播图
        </Button>
            </span>
            <Table
                dataSource={bannerlist}
                columns={columns}
                rowKey={(record) => record.bannerid}
                bordered={true}
            />
        </Fragment>
    );
}

export default BannerManagement;
